<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8">
		<title>Elasticsearch UI Performance Testing Harness</title>
		<link rel="stylesheet" href="../_site/base/reset.css">
		<link rel="stylesheet" href="../_site/app.css">
		<script src="../_site/i18n.js" data-baseDir="../_site/lang" data-langs="en,fr"></script>
		<script src="../_site/vendor.js"></script>
		<script src="../_site/app.js"></script>
		<script>
			$( function() {
				var widget;
				var container = document.getElementById("demo");
				function build() {
					widget = window.builder();
					widget.attach( demo );
				}
				function remove() {
					widget.remove();
					widget = null;
				}
				var args = location.search.substring(1).split("&").reduce(function(r, p) {
					r[decodeURIComponent(p.split("=")[0])] = decodeURIComponent(p.split("=")[1]); return r;
				}, {});
				var script0 = document.getElementsByTagName('script')[0];
				var s = document.createElement("script");
				s.src = '../src/' + args['demo'];
				script0.parentNode.insertBefore(s, script0);
				document.title = args['demo'].match(/([^\/]+)(\.js)$/)[1];
				document.getElementsByName("build")[0].addEventListener("click", build );
				document.getElementsByName("remove")[0].addEventListener("click", remove );
				document.getElementsByName("repeat")[0].addEventListener("click", function() {
					console.time("build x 1000 in");
					for( var i = 0; i < 1000; i++ ) {
						build();
						remove();
					}
					console.timeEnd("build x 1000 in");
				});
			} );
		</script>
		<link rel="icon" href="../_site/app/favicon.png" type="image/png">
	</head>
	<body>
		<div class="header">
			<button type="button" name="build">Build</button>
			<button type="button" name="remove">Remove</button>
			<button type="button" name="repeat">Build and Remove x 1000</button>
		</div>
		<div id="demo"></div>
	</body>
</html>
